﻿<template>
  <v-flex class="xs12 mx-auto">
    <v-form v-model="valid" ref="basic">
      <v-layout row>
        <v-flex xs10 mx-auto>
          <div align="center" style="margin-top: 40px;margin-left: 140px">
            <v-upload v-model="userForm.avator" :isAudio="false" :isAvator="true" :pic-width="100" :pic-height="100"
                          needSignature url="/signature?type=image"/>
          </div>
        </v-flex>
      </v-layout>
      <v-layout row>
          <v-flex class="xs10 mx-auto">
            <div style="margin-top: 40px;">
            <v-text-field
                      label="用户名"
                      v-model="userForm.username"
                      prepend-icon="mdi-emoticon-tongue"
                      required :rules="[v => !!v || '歌手名字不能为空']" hide-details/>
            </div>
          </v-flex>
      </v-layout>
      <v-layout row>

        <v-flex class="xs10 mx-auto">
          <div style="margin-top: 40px;">

          <v-text-field
                        label="密码"
                        :append-icon="show ? 'visibility' : 'visibility_off'"
                        :type="show ? 'text' : 'password'"
                        @click:append="show = !show"
                        v-model="userForm.password"
                        prepend-icon="mdi-emoticon-tongue"
                        required :rules="[v => !!v || '  密码不能为空']" hide-details/>
          </div>

        </v-flex>
            </v-layout>
      <v-layout row>
          <v-flex xs10 mx-auto>
              <div align="center" style="margin-top: 50px;">
                <v-btn @click="submit" color="primary">保存</v-btn>
              </div>
          </v-flex>
      </v-layout>
    </v-form>
  </v-flex>
</template>

<script>
export default {
  name: "user-form",
  props: {
    oldUser: {
      type: Object
    },
    isEdit: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      valid: false,
      userForm: {},
      show:false
    }
  },
  methods: {
    clear() {},
    submit() {
      if (!this.$refs.basic.validate) {
        this.$message.error("请先完成表单内容！");
      }

      this.$http({
        method: this.isEdit ? 'put' : 'post',
        url: "/user/save",
        data: this.$qs.stringify(this.userForm)
      }).then(() => {
        //成功，关闭窗口
        this.$emit("close");

        this.$message.success("保存成功")
      }).catch(error => {
        console.log(error)
        this.$message.error("保存失败！");
      })
    }
  },
  watch: {
    oldUser: {
      deep: true,
      handler() {
        console.log(this.oldUser)
        this.userForm = this.oldUser
      }
    },
  }
}
</script>